<template>
    <view class="page bg-fff u-skeleton">
        <view class="priceRangeTabs u-skeleton-fillet">
            <u-tabs :list="navs" keyName="title" :current="current" height="90" font-size="26" :bar-style="barSty" lineColor="#007235" @change="tabsChange" active-color="#007235"></u-tabs>
        </view>
        <view class="productsList u-skeleton-fillet" v-if="navs.length > 0">
            <block v-if="navs[current].list.length > 0">
                <view class="productBox">
                    <block v-for="prod in navs[current].list" :key="prod.id">
                        <view class="prod">
                            <product-item :product="prod"></product-item>
                        </view>
                    </block>
                </view>
                <up-loadmore :status="navs[current].loadingType" v-if="navs[current].list.length > 0" />
            </block>

            <up-empty text="暂无数据" mode="list" marginTop="100" v-if="navs[current]?.list.length === 0 && navs[current]?.loadingType === 'nomore'"></up-empty>
        </view>
    </view>
</template>

<script>
    import { mapState, mapActions } from 'pinia'
    import { useUserInfoStore, useConfigStore } from '@/store/index';
    import { getPriceRange } from '@/common/api';
    import { findPriceAPI } from '@/common/api/houses';
	export default {
        data() {
            return {
                city: '310100',
                cityName: '上海',
                tabValue: '',
                current: 0,
                navs: [],
                barSty: {
                    width:'0rpx',
                    height:'0rpx',
                    bottom: '0rpx',
                    backgroundColor: 'none',
                    borderRadius: '0rpx',
                    borderRight: '15rpx solid transparent',
                    borderLeft: '15rpx solid transparent',
                    borderBottom: '15rpx solid #ffffff'
                },
                loading: true,
                shareImage: ''
            }
        },
        computed:{
            ...mapState(useUserInfoStore, ['userInfo'])
        },
        onShareAppMessage(res) {
            return {
                title: `${this.cityName}各价格段热度榜`,
                path: `/pages/houses/ranking-list/price-ranking-list?city=${this.city}&puid=${this.userInfo.id}&param=${this.tabValue}`,
            	//#ifdef MP-TOUTIAO
            	templateId: '3e9tvurff9vob6ot7u',
            	//#endif
            }
        },
        //#ifdef MP-WEIXIN
        onShareTimeline() {
            return {
                title: `${this.cityName}各价格段热度榜`,
                query: `city=${this.city}&puid=${this.userInfo.id}&param=${this.tabValue}`
            }
        },
        //#endif
        onLoad(options){
            let { puid, param='' } = options;
            this.city = '310100';
            this.tabValue = param || '';
            if(puid) {
                this.setPuid(puid)
            }
            this.cityName = '上海'
            uni.$check_and_login(() => {
                this.init()
            })
        },

        onReachBottom(){
        	this.loadData();
        },

        methods:{
            ...mapActions(useConfigStore, ['setPuid']),
            async init(){
                let priceTabsRes = await getPriceRange(this.city, 'amount_share');
                if(priceTabsRes.status === 0) {
                    let list = priceTabsRes.detail;
                    if(list.length > 0) {
                        this.navs = list.map(item => ({
                            ...item,
                            list: [],
                            next: '',
                            loadingType: 'loadmore'
                        }))
                    }
                    let findI = list.findIndex(item => item.value === this.tabValue);
                    this.current = findI !== -1 ? findI : 0;
                    if(list[this.current].image){
                      this.shareImage = list[this.current].image
                    }
                    this.loadData();
                }else{
                    uni.$u.toast(priceTabsRes.detail);
                }
            },

            async loadData(){
                let navCurrent = this.navs[this.current];
                if(navCurrent.loadingType === 'loading' || navCurrent.loadingType === 'nomore') return;
                navCurrent.loadingType = 'loading';
                let url = (navCurrent.next == '' || navCurrent.list.length == 0) ? `/product/mall/v6/query?city=${this.city}&amount=${navCurrent.value}&ext=no_end` : navCurrent.next;
                try {
                    const res = await findPriceAPI(url);
                    if(res.status == 0){
                        let { next, results } = res.detail;
                        if(results.length > 0) {
                            navCurrent.list.push(...results);
                        }
                        navCurrent.next = next;
                        navCurrent.loadingType = next ? 'loadmore' : 'nomore';
                        this.loading = false;
                    }else{
                        uni.$u.toast(res.detail);
                    }
                } catch (error) {
                    uni.stopPullDownRefresh();
                }
            },

            //切换tab
            tabsChange({index}) {
                this.current = index;
                this.tabValue = this.navs[index].value
                this.shareImage = this.navs[index].image
                if(this.navs[index].list.length > 0) return;
                this.loadData();
            }
        }
    }
</script>

<style scoped lang="scss">
.page{
    min-height: 100vh;
    line-height: 1;
    .productsList{
        padding: 0rpx 28rpx 50rpx 28rpx;
        .productBox {
            .prod{
                border-bottom: 1rpx solid rgba(0,0,0,.05);
            }
        }
    }
}
</style>
